<template>
    <view>

        <uni-forms style="margin: 12px;" ref="form"  :modelValue="baseFormData" label-position="top" label-width="120px" >
            <uni-forms-item label="留校原因" required >
                <uni-easyinput v-model="baseFormData.reason" type="textarea" placeholder="请输入留校原因" />
            </uni-forms-item>
            <uni-forms-item label="留校开始时间" required >
                <uni-easyinput v-model="baseFormData.begintime" placeholder="2024/01/03  00:00:00" />
            </uni-forms-item>
            <uni-forms-item label="留校结束时间" required >
                <uni-easyinput v-model="baseFormData.endtime" placeholder="请输入留校结束时间" />
            </uni-forms-item>
            <uni-forms-item label="家庭联系人姓名" required >
                <uni-easyinput v-model="baseFormData.name" placeholder="请输入家庭联系人姓名" />
            </uni-forms-item>
            <uni-forms-item label="家庭联系人电话" required>
                <uni-easyinput v-model="baseFormData.tel"  placeholder="请输入家庭联系人电话" />
            </uni-forms-item>
            <uni-forms-item label="是否需要校内住宿" required>
                <uni-data-checkbox v-model="baseFormData.opt" :localdata="opts" />
            </uni-forms-item>
            <uni-forms-item label="校外住宿地址" required>
                <uni-data-picker placeholder="请选择省市区" :localdata="range" v-model="baseFormData.address">
                </uni-data-picker>
                <uni-easyinput   placeholder="详细地址" />
            </uni-forms-item>

            <view class="bu1">
                <button type="primary" @click="toindex()">
                    <text class="zi1">确认修改</text></button>
            </view>
            <view class="bu2">
                <button @click="toindex()">
                    <text class="zi2">
                        再想想
                    </text></button>
            </view>
        </uni-forms>
    </view>
</template>

<script setup>
import { reactive, ref } from 'vue';
const form = ref()
let toindex = function(){
    uni.switchTab({
        url:"/pages/index/index"
    })
}

const baseFormData = reactive({
    reason: '',
    begintime:'',
    endtime:'',
    name:'',
    tel: '',
    address: '',
    opt: 1,
})
const opts =ref([

    {
        text: '需要',
        value: 0
    }, {
        text: '不需要',
        value: 1
    }
])
const range =ref(

    [{
        text: "山西省",
        value: "1-0",
        children: [
            {
                text: "太原市",
                value: "1-1",
                children:[
                    {
                        text: "尖草坪区",
                        value: "1-1-1"
                    },
                    {
                        text: "小店区",
                        value: "1-1-2"
                    },
                ]
            },
            {
                text: "临汾市",
                value: "1-2",
                children:[
                    {
                        text: "尧都",
                        value: "1-2-1"
                    },
                    {
                        text: "段乡县",
                        value: "1-2-2"
                    },
                ]
            },

        ]
    },
        {
            text: "河南省",
            value: "2-0",
            children: [{
                text: "郑州市",
                value: "2-1",
                children:[
                    {
                        text: "二七区",
                        value: "2-1-1"
                    },
                    {
                        text: "金水区",
                        value: "2-1-2"
                    },
                ]
            },
                {
                    text: "洛阳市",
                    value: "2-2",
                    children:[
                        {
                            text: "八里堂",
                            value: "2-1-1"
                        },
                        {
                            text: "二郎庙",
                            value: "2-2-2"
                        },
                    ]
                }]
        },
        {
            text: "山东省",
            value: "3-0",
            children: [{
                text: "济南市",
                value: "3-1"
            },
                {
                    text: "青岛市",
                    value: "3-2"
                }]
        }
    ])

</script>

<style scoped>
.bu1{
    width: 95%;
    height: 40px;
    background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
    border-radius: 4px;
    margin-left: 12px;
    margin-top: 12px;
}
.bu2{
    width: 95%;
    height: 40px;
    background: #FFFFFF;
    border: 1px solid #1277FF;
    border-radius: 4px;
    margin-left: 12px;
    margin-top: 16px;
}
.zi1{
    width: 60px;
    height: 21px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 15px;
    color: #FFFFFF;
}
.zi2{
    width: 45px;
    height: 21px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 15px;
    color: #006DFF;
}
</style>